/**
 * Created by zhangsong on 2019-05-08.
 */
import PDFPreview from '@/components/PDFPreview';
import ReaderCard from '@/components/ReaderCard/staffIndex';
import Power from '@/constants/power';
import UserReducer from '@/dva/user';
import { downloadZip } from '@/utils/attachment';
import Authorized from '@/utils/Authorized';
import React, { Component, Fragment } from 'react';
import {
  Form,
  Input,
  Radio,
  Tooltip,
  Icon,
  Button,
  Spin,
  Popconfirm,
  Modal,
  Result,
  Checkbox,
  Select,
  Table,
} from 'antd';
import { formatMessage, FormattedMessage, getLocale } from '@/utils/i18n';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { StaffApplication } from '@/constants/routes';
import StaffReducer from '@/dva/application/staff';
import { getPageQuery } from '@/utils/utils';
import Style from './index.module.scss';
import domtoimage from 'dom-to-image';
import moment from 'moment';

const { Namespace, Effects } = StaffReducer;

@connect(
  state => ({
    staffStore: state[Namespace],
    userStore: state[UserReducer.Namespace],
  }),
  dispatch => ({
    getById: id =>
      dispatch({
        type: `${Namespace}/${Effects.getStaffById}`,
        data: id,
      }),
    getPreviewPdfById: id =>
      dispatch({
        type: `${Namespace}/${Effects.getPreviewPdfById}`,
        data: {
          id,
        },
      }),
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    handPDFModalCancel: _ =>
      dispatch({
        type: `${Namespace}/${Effects.handPDFModalCancel}`,
        data: {},
      }),
    handleApproval: data =>
      dispatch({
        type: `${Namespace}/${Effects.approval}`,
        data,
      }),
    handleDisapproval: data =>
      dispatch({
        type: `${Namespace}/${Effects.disapproval}`,
        data,
      }),
    handleReviewOk: data =>
      dispatch({
        type: `${Namespace}/${Effects.reviewok}`,
        data,
      }),
  }),
)
@Form.create()
class Index extends Component {
  constructor(props) {
    super(props);
    const obj = getPageQuery();
    this.state = {
      id: obj.id,
      previewImage: '',
      previewVisible: false,
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
      readerCardModal: false,
      disabled: true,
      pdfDownLoading: false,
    };
  }

  componentDidMount() {
    const { id } = this.state;
    const { getById } = this.props;
    getById(id);
  }

  toHtml2Canvas = () => {
    const { id } = this.state;
    const { staffStore = {} } = this.props;
    const { staffInfo } = staffStore;
    this.setState(
      {
        disabled: false,
        pdfDownLoading: true,
      },
      () => {
        setTimeout(() => {
          const element = document.querySelector('#staffDetailBody');
          domtoimage
            .toJpeg(element)
            .then(dataUrl =>
              downloadZip(
                {
                  id,
                  type: 'staff',
                  base64: dataUrl,
                },
                `${staffInfo.cardNo}_${staffInfo.surname}.zip`,
              ),
            )
            .then(() => {
              this.setState({
                disabled: true,
                pdfDownLoading: false,
              });
            })
            .catch(error => {
              console.error('oops, something went wrong!', error);
              alert(`error:${error.message}`);
              this.setState({
                disabled: true,
                pdfDownLoading: false,
              });
            });
        }, 500);
      },
    );
  };

  onReview = () => {
    const { handleReviewOk } = this.props;
    const { id } = this.state;
    handleReviewOk({ id });
  }

  handleGoBack = () => {
    const { history } = this.props;
    history.goBack();
  };

  handleUpdate = () => {
    const { history } = this.props;
    const { id } = this.state;
    history.push(`${StaffApplication.modify.url}?id=${id}`);
  };

  onPreviewClick = () => {
    const { getPreviewPdfById } = this.props;
    const { id } = this.state;
    getPreviewPdfById(id);
  };

  onPreviewClickSure = () => {
    const { handPDFModalCancel } = this.props;
    handPDFModalCancel();
  };

  // 显示头像预览
  handlePhotographPreview = async file => {
    if (file.url && file.url.endsWith('.pdf')) {
      this.setState({
        uploadPdfPreviewVisible: true,
        pdfUploadReview: file.url,
      });
      return;
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  handlePhotographClose = () => {
    this.setState({
      previewImage: '',
      previewVisible: false,
    });
  };

  handleUploadPDFCancel = () => {
    this.setState({
      uploadPdfPreviewVisible: false,
      pdfUploadReview: '',
    });
  };

  onApprovalClick = () => {
    const { handleApproval } = this.props;
    const { id } = this.state;
    handleApproval({ id });
  };

  onDisapprovalClick = () => {
    const { handleDisapproval } = this.props;
    const { id } = this.state;
    handleDisapproval({ id });
  };

  openRegisterEface = () => {
    this.setState({
      readerCardModal: true,
    });
  };

  closeRegisterEface = () => {
    this.setState({
      readerCardModal: false,
    });
  };

  submitRegisterCard = () => {
    const { getById } = this.props;
    const { id } = this.state;
    this.setState({
      readerCardModal: false,
    });
    getById(id);
  };

  renderColumns = () => [
    {
      title: formatMessage({ id: 'baseInfo.actionpeople' }),
      dataIndex: 'operate_user',
    },
    {
      title: formatMessage({ id: 'baseInfo.actionstate' }),
      dataIndex: 'operate_status',
      render: (text, record, index) => {
        console.log('operate_status', text, record, index)
        let status = '';
        switch (text) {
          case 0:
            status = formatMessage('baseInfo.needApprovalStatus')
            break;
          case 1:
            status = formatMessage('applicationStaff.columns.checkedApproved.approved')
            break;
          case -1:
            status = formatMessage('applicationStaff.columns.checkedApproved.disapproved')
            break;
          case 3:
            status = formatMessage('applicationContractor.temporary.cancelled')
            break;
          default:
            status = ''
            break;
        }
        return (
          <div>
            {status}
          </div>
        );
      },
    },
    {
      title: formatMessage({ id: 'baseInfo.actiondate' }),
      dataIndex: 'operate_date',
    },
  ]

  render() {
    const { form, staffStore = {}, userStore = {} } = this.props;
    const { getFieldDecorator } = form;
    const { area, workerType, currentUser } = userStore;
    const { staffInfo = {}, detailLoading, pdfPreviewVisible, pdfReview, pdfLoading } = staffStore;
    const {
      previewVisible,
      previewImage,
      uploadPdfPreviewVisible,
      pdfUploadReview,
      readerCardModal,
      disabled,
      pdfDownLoading,
    } = this.state;
    const zoneTips = Array.isArray(area) ? (
      <div className={Style.zoneTipsWrapper}>
        {area.map(item => (
          <div
            key={item.id + (getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh)}
            className={Style.zoneTipsRow}
          >
            <div className={Style.zoneTipsLabel}>{item.areaCode}</div>
            <div>=</div>
            <div>{getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh}</div>
          </div>
        ))}
      </div>
    ) : null;

    let auditedStatus = null;
    if (staffInfo.status === 1) {
      auditedStatus = <Result status="success" title={formatMessage('baseInfo.approvalStatus')} />;
    } else if (staffInfo.status === -1) {
      auditedStatus = <Result status="error" title={formatMessage('baseInfo.disapprovalStatus')} />;
    } else if (staffInfo.status === 0) {
      auditedStatus = (
        <Result status="warning" title={formatMessage('baseInfo.needApprovalStatus')} />
      );
    }
    console.log('看看吧@@@', staffInfo)
    return (
      <PageHeaderWrapper>
        <Spin spinning={!!detailLoading || pdfDownLoading} size="large">
          <PDFPreview
            visible={pdfPreviewVisible}
            url={pdfReview}
            loading={pdfLoading}
            printing={Authorized.check(Power.StaffApplication.printing, true, false)}
            onOk={() => this.onPreviewClickSure()}
          />
          <Modal
            visible={previewVisible}
            footer={null}
            maskClosable
            onCancel={() => {
              this.handlePhotographClose();
            }}
          >
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
          <PDFPreview
            visible={uploadPdfPreviewVisible}
            url={pdfUploadReview}
            onOk={this.handleUploadPDFCancel}
            onCancel={this.handleUploadPDFCancel}
            printing={false}
          />
          {readerCardModal ? (
            <ReaderCard
              record={staffInfo}
              cancel={this.closeRegisterEface}
              sure={this.submitRegisterCard}
            />
          ) : null}
          <div className={`${Style.bodyWrapper}`}>
            <div
              className={`${Style.body} ${disabled ? null : Style.disabled}`}
              id="staffDetailBody"
            >
              <div className={Style.excelTitle}>
                <h1>AIRPORT AUTHORITY HONG KONG</h1>
                <h1>SECURITY PASS FOR PERMANENT STAFF</h1>
                {disabled ? <div className={Style.statusWrapper}>{auditedStatus}</div> : null}
              </div>
              <Form labelAlign="right">
                <div className={`${Style.part} ${Style.partA}`}>
                  <div className={Style.title}>
                    <strong className={Style.font16}>PART A</strong>
                    {/* eslint-disable-next-line react/no-unescaped-entities */}
                    <span>Applicant's Particulars</span>
                    <i>(to be completed by Applicant)</i>
                  </div>
                  <div className={Style.detail}>
                    {Array.isArray(staffInfo.headPhoto) && staffInfo.headPhoto.length > 0 ? (
                      <div className={Style.headerImageWrapper}>
                        <Form.Item>
                          <img
                            alt={formatMessage('applicationStaff.columns.headPhoto.name')}
                            onClick={() => {
                              if (
                                Array.isArray(staffInfo.headPhoto) &&
                                staffInfo.headPhoto.length > 0
                              ) {
                                this.handlePhotographPreview({
                                  url: staffInfo.headPhoto[0].url,
                                });
                              }
                            }}
                            src={
                              Array.isArray(staffInfo.headPhoto) && staffInfo.headPhoto.length > 0
                                ? staffInfo.headPhoto[0].url
                                : ''
                            }
                            width={104}
                            height={104}
                          />
                        </Form.Item>
                      </div>
                    ) : null}

                    <div className={Style.fieldWrapper}>
                      <Form.Item label={formatMessage('applicationStaff.columns.surname.name')}>
                        {getFieldDecorator('surname', {
                          initialValue: staffInfo.surname,
                          rules: [
                            {
                              // required: true,
                              message: formatMessage('applicationStaff.columns.surname.errMessage'),
                            },
                          ],
                        })(<Input maxLength={100} disabled={disabled} />)}
                      </Form.Item>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.nameAlias.name')}
                      >
                        {getFieldDecorator('alias', {
                          initialValue: staffInfo.alias,
                        })(<Input maxLength={100} disabled={disabled} />)}
                      </Form.Item>
                      <Form.Item label={formatMessage('applicationStaff.columns.otherName.name')}>
                        {getFieldDecorator('otherName', {
                          initialValue: staffInfo.otherName,
                        })(<Input maxLength={100} disabled={disabled} />)}
                      </Form.Item>
                      <Form.Item label={formatMessage('applicationStaff.columns.idCardNo.name')}>
                        {getFieldDecorator('idCardNo', {
                          initialValue: staffInfo.idCardNo,
                          rules: [
                            {
                              // required: true,
                              message: formatMessage(
                                'applicationStaff.columns.idCardNo.errMessage',
                              ),
                            },
                          ],
                        })(<Input maxLength={100} disabled={disabled} />)}
                      </Form.Item>
                      <Form.Item label={formatMessage('applicationStaff.columns.annexes.name')}>
                        {Array.isArray(staffInfo.id_base64)
                          ? staffInfo.id_base64.map((item, index) => (
                            // eslint-disable-next-line react/no-array-index-key
                            <div key={index}>
                              <Button type="link" onClick={() => this.handlePhotographPreview(item)}>
                                {item.name}
                              </Button>
                            </div>
                          ))
                          : null}
                      </Form.Item>
                      <Form.Item label={formatMessage('applicationStaff.columns.staffNo.name')}>
                        {getFieldDecorator('staffNo', {
                          initialValue: staffInfo.staffNo,
                          rules: [
                            {
                              // required: true,
                              message: formatMessage('applicationStaff.columns.staffNo.errMessage'),
                            },
                          ],
                        })(<Input maxLength={100} disabled={disabled} />)}
                      </Form.Item>
                      <Form.Item label={formatMessage('applicationStaff.columns.position.name')}>
                        {getFieldDecorator('position', {
                          initialValue: staffInfo.position,
                          rules: [
                            {
                              // required: true,
                              message: formatMessage(
                                'applicationStaff.columns.position.errMessage',
                              ),
                            },
                          ],
                        })(<Input maxLength={100} disabled={disabled} />)}
                      </Form.Item>
                      <Form.Item label={formatMessage('applicationStaff.columns.division.name')}>
                        {getFieldDecorator('division', {
                          initialValue: staffInfo.division,
                          rules: [
                            {
                              // required: true,
                              message: formatMessage(
                                'applicationStaff.columns.division.errMessage',
                              ),
                            },
                          ],
                        })(<Input maxLength={100} disabled={disabled} />)}
                      </Form.Item>
                      <Form.Item label={formatMessage('applicationStaff.columns.department.name')}>
                        {getFieldDecorator('department', {
                          initialValue: staffInfo.department,
                          rules: [
                            {
                              // required: true,
                              message: formatMessage(
                                'applicationStaff.columns.department.errMessage',
                              ),
                            },
                          ],
                        })(<Input maxLength={100} disabled={disabled} />)}
                      </Form.Item>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.telephone.name')}
                      >
                        {getFieldDecorator('telephone', {
                          initialValue: staffInfo.telephone,
                        })(<Input maxLength={50} disabled={disabled} />)}
                      </Form.Item>
                    </div>
                  </div>
                </div>
                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong className={Style.font16}>PART B</strong>
                    <i>(to be completed by the Division / Department Head concerned)</i>
                  </div>
                  <div className={Style.detail}>
                    <div>
                      {/* eslint-disable-next-line max-len */}
                      To : Security Manager
                      <br />
                      The Applicant is entitled to enter the following zone(s) :
                    </div>
                    <Form.Item
                      label={
                        <span>
                          {formatMessage('applicationStaff.columns.zoneRequired.name')}
                          &nbsp;
                          <Tooltip title={zoneTips}>
                            <Icon type="question-circle-o" />
                          </Tooltip>
                        </span>
                      }
                    >
                      {area == null ? (
                        <Spin spinning />
                      ) : (
                        getFieldDecorator('zoneRequired', {
                          initialValue: staffInfo.zoneRequired,
                          rules: [
                            {
                              required: true,
                              message: formatMessage(
                                'applicationStaff.columns.zoneRequired.errMessage',
                              ),
                            },
                          ],
                        })(
                          <Checkbox.Group name="zoneRequired" disabled={disabled}>
                            {area.map(item => (
                              <Checkbox key={item.id} value={item.id} disabled={item.status !== 1}>
                                {item.areaCode}
                              </Checkbox>
                            ))}
                          </Checkbox.Group>,
                        )
                      )}
                    </Form.Item>
                    <Form.Item
                      label={formatMessage('applicationStaff.columns.contractApplicantDrive.name')}
                    >
                      {getFieldDecorator('needDriving', {
                        initialValue: staffInfo.needDriving,
                        rules: [
                          {
                            required: true,
                            message: formatMessage('baseInfo.placeholderChecked'),
                          },
                        ],
                      })(
                        <Radio.Group disabled={disabled}>
                          <Radio value={1}>
                            <FormattedMessage id="applicationStaff.columns.contractApplicantDrive.applicant" />
                          </Radio>
                          <Radio value={0}>
                            <FormattedMessage id="applicationStaff.columns.contractApplicantDrive.disApplicant" />
                          </Radio>
                        </Radio.Group>,
                      )}
                    </Form.Item>
                    <Form.Item label={formatMessage('applicationContractor.columns.contractTo.name')}>
                      {getFieldDecorator('projectExpire', {
                        initialValue: staffInfo.projectExpire
                          ? moment(staffInfo.projectExpire).format(
                            'YYYY-MM-DD',
                          )
                          : null,
                      })(<Input maxLength={50} disabled={disabled} />)}
                    </Form.Item>
                    <Form.Item label={formatMessage('applicationStaff.columns.annexes.name')}>
                      {Array.isArray(staffInfo.drive_base64)
                        ? staffInfo.drive_base64.map((item, index) => (
                          // eslint-disable-next-line react/no-array-index-key
                          <div key={index}>
                            <Button type="link" onClick={() => this.handlePhotographPreview(item)}>
                              {item.name}
                            </Button>
                          </div>
                        ))
                        : null}
                    </Form.Item>
                    <Form.Item
                      label={formatMessage('applicationStaff.columns.drivingLicenseExpire.name')}
                    >
                      {getFieldDecorator('drivingLicenseExpire', {
                        initialValue: staffInfo.drivingLicenseExpire,
                      })(<Input maxLength={50} disabled={disabled} />)}
                    </Form.Item>
                    <Form.Item label={formatMessage('applicationStaff.columns.staffVehicle.name')}>
                      {getFieldDecorator('staffVehicle', {
                        initialValue: staffInfo.staffVehicle,
                      })(<Input maxLength={50} disabled={disabled} />)}
                    </Form.Item>
                  </div>
                </div>
                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong className={Style.font16}>PART C</strong>
                    <i>(to be completed by Security Control Office )</i>
                  </div>
                  <div className={Style.detail}>
                    <div>
                      {/* eslint-disable-next-line max-len */}
                      The above staff has / has not * attended a Site Orientation Course held by
                      Construction
                      <br />
                      Support Department. (Note : No Security Passes giving access to the Project
                      Site
                      <br />
                      will be issued until the prospective bearer has attended such Course.)
                    </div>
                    {
                      currentUser.role_id === '110' ? null :
                        <Form.Item
                          label={formatMessage('applicationStaff.columns.checkedApproved.name')}
                        >
                          {getFieldDecorator('checkedApproved', {
                            initialValue: staffInfo.checkedApproved,
                          })(
                            <Radio.Group disabled={disabled}>
                              <Radio value={1}>
                                <FormattedMessage id="applicationStaff.columns.checkedApproved.approved" />
                              </Radio>
                              <Radio value={-1}>
                                <FormattedMessage id="applicationStaff.columns.checkedApproved.disapproved" />
                              </Radio>
                              {
                                currentUser.role_id === '100' ? (
                                  <Radio value={3}>
                                    <FormattedMessage id="applicationContractor.temporary.cancelled" />
                                  </Radio>
                                ) : null
                              }
                              <Radio value={0}>
                                <FormattedMessage id="baseInfo.needApprovalStatus" />
                              </Radio>
                            </Radio.Group>,
                          )}
                        </Form.Item>
                    }
                    <Form.Item label={formatMessage('applicationStaff.columns.expiredDate.name')}>
                      {getFieldDecorator('expiredDate', {
                        initialValue: staffInfo.expiredDate
                          ? moment(staffInfo.expiredDate).format(
                            'YYYY-MM-DD',
                          )
                          : null,
                      })(<Input maxLength={50} disabled={disabled} />)}
                    </Form.Item>
                    <Form.Item
                      label={
                        <span>
                          {formatMessage('applicationStaff.columns.zoneSpecified.name')}
                          &nbsp;
                          <Tooltip title={zoneTips}>
                            <Icon type="question-circle-o" />
                          </Tooltip>
                        </span>
                      }
                    >
                      {area == null ? (
                        <Spin spinning />
                      ) : (
                        getFieldDecorator('zoneSpecified', {
                          initialValue: staffInfo.zoneSpecified,
                          rules: [
                            {
                              required: true,
                              message: formatMessage(
                                'applicationStaff.columns.zoneSpecified.errMessage',
                              ),
                            },
                          ],
                        })(
                          <Checkbox.Group name="zoneSpecified" disabled={disabled}>
                            {area.map(item => (
                              <Checkbox key={item.id} value={item.id} disabled={item.status !== 1}>
                                {item.areaCode}
                              </Checkbox>
                            ))}
                          </Checkbox.Group>,
                        )
                      )}
                    </Form.Item>
                    <Form.Item label={formatMessage('applicationStaff.columns.reasons.name')}>
                      {getFieldDecorator('reasons', {
                        initialValue: staffInfo.reasons,
                        rules: [
                          {
                            // required: true,
                            message: formatMessage('applicationStaff.columns.reasons.errMessage'),
                          },
                        ],
                      })(
                        <Input.TextArea
                          autosize={{
                            minRows: 2,
                            maxRows: 6,
                          }}
                          maxLength={1000}
                          disabled={disabled}
                        />,
                      )}
                    </Form.Item>
                  </div>
                </div>
                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong className={Style.font16}>PART D</strong>
                    <i>(to be completed by the staff concerned)</i>
                  </div>
                  <div className={Style.detail}>
                    <Form.Item label={formatMessage('applicationStaff.columns.passNumber.name')}>
                      {getFieldDecorator('passNumber', {
                        initialValue: staffInfo.passNumber,
                      })(<Input maxLength={100} disabled={disabled} />)}
                    </Form.Item>
                  </div>
                </div>
                <Form.Item label={formatMessage('applicationStaff.columns.annexes.name')}>
                  {Array.isArray(staffInfo.annexes)
                    ? staffInfo.annexes.map((item, index) => (
                      // eslint-disable-next-line react/no-array-index-key
                      <div key={index}>
                        <Button type="link" onClick={() => this.handlePhotographPreview(item)}>
                          {item.name}
                        </Button>
                      </div>
                    ))
                    : null}
                </Form.Item>
                <Form.Item
                  label={formatMessage(
                    'applicationContractor.columns.annexes.groupname',
                  )}
                >
                  {getFieldDecorator('groupName', {
                    initialValue: staffInfo.newlistName,
                  })(<Input maxLength={50} disabled={disabled} />)}
                </Form.Item>
                <div className={Style.part} style={{ marginTop: 30 }}>
                  <div className={Style.title}>
                    <strong>Card</strong>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      <div className={Style.table}>
                        {/* 绿卡 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.greenCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('workerCardName1', {
                                initialValue: staffInfo.workerCardName1,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.num.name')}
                            >
                              {getFieldDecorator('workerCardNo1', {
                                initialValue: staffInfo.workerCardNo1,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.num.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                            >
                              {getFieldDecorator('workerCardExpiredDate1', {
                                initialValue: staffInfo.workerCardExpiredDate1,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.num.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <Form.Item label={formatMessage('applicationStaff.columns.annexes.name')}>
                          {Array.isArray(staffInfo.green_base64)
                            ? staffInfo.green_base64.map((item, index) => (
                              // eslint-disable-next-line react/no-array-index-key
                              <div key={index}>
                                <Button type="link" onClick={() => this.handlePhotographPreview(item)}>
                                  {item.name}
                                </Button>
                              </div>
                            ))
                            : null}
                        </Form.Item>
                        {/* 工人注册卡 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.registerCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('workerCardName2', {
                                initialValue: staffInfo.workerCardName2,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.num.name')}
                            >
                              {getFieldDecorator('workerCardNo2', {
                                initialValue: staffInfo.workerCardNo2,
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                            >
                              {getFieldDecorator('workerCardExpiredDate2', {
                                initialValue: staffInfo.workerCardExpiredDate2,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <Form.Item label={formatMessage('applicationStaff.columns.annexes.name')}>
                          {Array.isArray(staffInfo.regist_base64)
                            ? staffInfo.regist_base64.map((item, index) => (
                              // eslint-disable-next-line react/no-array-index-key
                              <div key={index}>
                                <Button type="link" onClick={() => this.handlePhotographPreview(item)}>
                                  {item.name}
                                </Button>
                              </div>
                            ))
                            : null}
                        </Form.Item>
                        <div className={Style.row}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.workType.name')}
                            >
                              {getFieldDecorator('workerCardWorkType2', {
                                initialValue: staffInfo.workerCardWorkType2,
                              })(
                                <Select
                                  disabled={disabled}
                                  showSearch
                                  style={{ width: '100%' }}
                                  optionFilterProp="children"
                                  filterOption={(input, option) =>
                                    option.props.children
                                      .toLowerCase()
                                      .indexOf(input.toLowerCase()) >= 0
                                  }
                                  loading={workerType === null}
                                  placeholder={formatMessage('baseInfo.placeholderChecked')}
                                >
                                  {Array.isArray(workerType)
                                    ? workerType.map(item => (
                                      <Select.Option
                                        key={item.id}
                                        value={item.id}
                                      >{`${item.code} - ${item.nameZh}`}</Select.Option>
                                    ))
                                    : null}
                                </Select>,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        {/* 蓝卡 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.blueCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('workerCardName3', {
                                initialValue: staffInfo.workerCardName3,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.num.name')}
                            >
                              {getFieldDecorator('workerCardNo3', {})(
                                <Input maxLength={50} autoComplete="off" disabled={disabled} />,
                              )}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                            >
                              {getFieldDecorator('workerCardExpiredDate3', {
                                initialValue: staffInfo.workerCardExpiredDate3,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        {/* 自定义 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.customizeCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('workerCardName4', {
                                initialValue: staffInfo.workerCardName4,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.num.name')}
                            >
                              {getFieldDecorator('workerCardNo4', {
                                initialValue: staffInfo.workerCardNo4,
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                            >
                              {getFieldDecorator('workerCardExpiredDate4', {
                                initialValue: staffInfo.workerCardExpiredDate4,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        {/* 自定义2 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.customizeCard" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.name.name')}
                            >
                              {getFieldDecorator('workerCardName5', {
                                initialValue: staffInfo.workerCardName5,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.num.name')}
                            >
                              {getFieldDecorator('workerCardNo5', {
                                initialValue: staffInfo.workerCardNo5,
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                            >
                              {getFieldDecorator('workerCardExpiredDate5', {
                                initialValue: staffInfo.workerCardExpiredDate5,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>

                        {/* 疫苗日期 */}
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.vaccination_date" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationCommon.workerCard.vaccination_date1',
                              )}
                            >
                              {getFieldDecorator('vaccination_date1', {
                                initialValue: staffInfo.vaccination_date1,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationCommon.workerCard.vaccination_date2',
                              )}
                            >
                              {getFieldDecorator('vaccination_date2', {
                                initialValue: staffInfo.vaccination_date2,
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationCommon.workerCard.vaccination_date3',
                              )}
                            >
                              {getFieldDecorator('vaccination_date3', {
                                initialValue: staffInfo.vaccination_date3,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={`${Style.row} ${Style.column3}`}>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationCommon.workerCard.vaccination_date4',
                              )}
                            >
                              {getFieldDecorator('vaccination_date4', {
                                initialValue: staffInfo.vaccination_date4,
                              })(<Input maxLength={50} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                          <div>
                            <Form.Item
                              label={formatMessage(
                                'applicationCommon.workerCard.vaccination_date5',
                              )}
                            >
                              {getFieldDecorator('vaccination_date5', {
                                initialValue: staffInfo.vaccination_date5,
                              })(<Input maxLength={50} autoComplete="off" disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                        <Form.Item label={formatMessage('applicationStaff.columns.annexes.name')}>
                          {Array.isArray(staffInfo.vacc_base64)
                            ? staffInfo.vacc_base64.map((item, index) => (
                              // eslint-disable-next-line react/no-array-index-key
                              <div key={index}>
                                <Button type="link" onClick={() => this.handlePhotographPreview(item)}>
                                  {item.name}
                                </Button>
                              </div>
                            ))
                            : null}
                        </Form.Item>
                        <div className={Style.row}>
                          <FormattedMessage id="applicationCommon.workerCard.include" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div style={{ display: 'flex' }}>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.include')}
                            >
                              {getFieldDecorator('isInfected', {
                                initialValue: staffInfo.isInfected === 2,
                                // initialValue: contractorInfo.isBlack === 2,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Checkbox
                                  checked={form.getFieldValue('isInfected')}
                                  name="isInfected"
                                  disabled
                                ></Checkbox>,
                              )}
                            </Form.Item>
                            <Form.Item
                              label=""
                            >
                              {getFieldDecorator('inspection_exemption_time', {
                                initialValue: staffInfo.inspection_exemption_time,
                                rules: [
                                  {
                                    required: form.getFieldValue('isInfected'),
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Input maxLength={50} disabled={disabled} />,
                              )}
                            </Form.Item>
                          </div>
                        </div>
                        <Form.Item label={formatMessage('applicationStaff.columns.annexes.name')}>
                          {Array.isArray(staffInfo.exemption_base64)
                            ? staffInfo.exemption_base64.map((item, index) => (
                              // eslint-disable-next-line react/no-array-index-key
                              <div key={index}>
                                <Button type="link" onClick={() => this.handlePhotographPreview(item)}>
                                  {item.name}
                                </Button>
                              </div>
                            ))
                            : null}
                        </Form.Item>
                        <div className={`${Style.row} ${Style.rowTitle}`} style={{ marginTop: 30 }}>
                          <FormattedMessage id="applicationCommon.workerCard.blacklist" />
                        </div>
                        <div className={`${Style.row} ${Style.column2}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.workerCard.isblacklist')}
                            >
                              {getFieldDecorator('isBlack', {
                                initialValue: staffInfo.isBlack === 2,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationCommon.workerCard.name.errMessage',
                                    ),
                                  },
                                ],
                              })(<Checkbox checked={staffInfo.isBlack === 2} disabled></Checkbox>)}
                            </Form.Item>
                          </div>
                        </div>
                        <div className={`${Style.row} ${Style.rowTitle}`}>
                          <FormattedMessage id="applicationContractor.temporary.email" />
                        </div>
                        <div className={`${Style.row}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationContractor.temporary.email')}
                            >
                              {getFieldDecorator('email', {
                                initialValue: staffInfo.email,
                                rules: [
                                  {
                                    required: false,
                                    message: formatMessage(
                                      'applicationContractor.temporary.errMessage.email',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={255} disabled={disabled} />)}
                            </Form.Item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.partone}>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      <div className={Style.table}>
                        <div className={`${Style.row}`}>
                          <div>
                            <Form.Item label={formatMessage('applicationCommon.readerCard.passno')}>
                              {formatMessage(`${staffInfo.card_no}`)}
                            </Form.Item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.part}>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      <div className={Style.table}>
                        <div className={`${Style.row}`}>
                          <div>
                            <Form.Item
                              label={formatMessage('applicationCommon.readerCard.status.name')}
                            >
                              {formatMessage(
                                `applicationCommon.readerCard.status.${staffInfo.efaceStatus}`,
                              )}
                              {disabled ? (
                                <Authorized authority={Power.ContractorApplication.printing}>
                                  <Button
                                    htmlType="button"
                                    style={{ marginLeft: '100px' }}
                                    type="dashed"
                                    size="small"
                                    onClick={() => this.openRegisterEface()}
                                  >
                                    {formatMessage('applicationCommon.readerCard.buttonName')}
                                  </Button>
                                </Authorized>
                              ) : null}
                            </Form.Item>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.part}>
                  <div className={Style.title}>
                    <strong>{formatMessage('baseInfo.approvehistory')}</strong>
                  </div>
                  <div className={Style.main}>
                    <div className={Style.detailWrapper}>
                      <Table
                        loading={!!detailLoading}
                        rowKey="id"
                        columns={this.renderColumns()}
                        pagination={false}
                        dataSource={staffInfo?.contractor_approve_operates}
                      />
                    </div>
                  </div>
                </div>
                {disabled ? (
                  <div className={Style.bottom}>
                    <Button htmlType="button" icon="rollback" onClick={this.handleGoBack}>
                      {formatMessage('button.rollback')}
                    </Button>

                    <Authorized authority={Power.StaffApplication.modify}>
                      <Button
                        type="primary"
                        htmlType="button"
                        icon="edit"
                        onClick={this.handleUpdate}
                      >
                        {formatMessage('button.update')}
                      </Button>
                    </Authorized>
                    {staffInfo.status === 0 ? (
                      <Fragment>
                        <Authorized authority={Power.StaffApplication.cancel}>
                          <Popconfirm
                            title={formatMessage('applicationContractor.temporary.cancelled')}
                            onConfirm={this.onReview}
                            okText={formatMessage('button.sure')}
                            cancelText={formatMessage('button.cancel')}
                          >
                            <Button type="danger" icon="stop">
                              {formatMessage('applicationContractor.temporary.cancelled')}
                            </Button>
                          </Popconfirm>
                        </Authorized>
                        <Authorized authority={Power.StaffApplication.approval}>
                          <Popconfirm
                            title={formatMessage('baseInfo.disapproval')}
                            onConfirm={this.onDisapprovalClick}
                            okText={formatMessage('button.sure')}
                            cancelText={formatMessage('button.cancel')}
                          >
                            <Button type="danger" icon="stop">
                              {formatMessage('button.disapproval')}
                            </Button>
                          </Popconfirm>
                        </Authorized>
                        <Authorized authority={Power.StaffApplication.approval}>
                          <Popconfirm
                            title={formatMessage('baseInfo.approval')}
                            onConfirm={this.onApprovalClick}
                            okText={formatMessage('button.sure')}
                            cancelText={formatMessage('button.cancel')}
                          >
                            <Button type="primary" icon="check-circle">
                              {formatMessage('button.approval')}
                            </Button>
                          </Popconfirm>
                        </Authorized>
                      </Fragment>
                    ) : null}
                    <Authorized authority={Power.StaffApplication.preview}>
                      <Button htmlType="button" icon="file-pdf" onClick={this.onPreviewClick}>
                        {formatMessage('button.preview')}
                      </Button>
                    </Authorized>
                    <Authorized authority={Power.StaffApplication.preview}>
                      <Button htmlType="button" icon="download" onClick={this.toHtml2Canvas}>
                        {formatMessage('button.download')}
                      </Button>
                    </Authorized>
                  </div>
                ) : null}
              </Form>
            </div>
          </div>
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default Index;
